<template>
  <!-- 附件四：巡查记录及作业照片 -->
  <div class="attachment-4-wrap page">
    <div class="page-content page-index">
      <div class="row" style="padding-left:40px;">
        <form class="form-horizontal">
          <div class="form-group col-xs-12">
            <div class="text-left">
              <h3 class="h3" style="letter-spacing: 2px;">附件{{directoryOrder.attachment4}}：</h3>
            </div>
          </div>
          <div class="form-group col-xs-12">
            <div class="text-left">
              <h3 class="h3" style="letter-spacing: 2px;">巡查记录及作业照片</h3>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="page-break"></div>
    <div class="page-content">
      <div class="row">
        <form class="form-horizontal">
          <div class="form-group col-xs-8">
            <label class="col-xs-1 control-label"></label>
            <label class="col-xs-11 control-label font-bold text-left cid"></label>
          </div>
          <div class="form-group col-xs-12">
            <div class="text-center">
              <h3 class="h3" style="letter-spacing: 2px;">建筑消防设施巡查记录表</h3>
            </div>
          </div>
          <div class="form-group col-xs-12">
            <div>
              <div class="pro-info">
                <div class="col-xs-5 text-left no-padding font-bold">项目名称：{{proname}}</div>
                <div class="col-xs-2 no-padding text-right font-bold">项目编号：</div>
                <div class="col-xs-5 no-padding">
                  <input type="text" placeholder="请输入项目编号" class="form-control no-border no-padding font-bold" v-model="currentPronum">
                </div>
              </div>
              <table id="maintainPlanTable" cellspacing="0" cellpadding="0" border="0">
                <thead>
                  <tr>
                    <th class="text-center" colspan="2">巡查项目</th>
                    <th class="text-center" rowspan="2" width="40%">巡查内容</th>
                    <th class="text-center" colspan="3">巡查情况</th>
                  </tr>
                  <tr>
                    <th class="text-center" width="15%">系统</th>
                    <th class="text-center" width="15%">类别</th>
                    <th class="text-center" width="10%">结果</th>
                    <th class="text-center" width="10%">故障数</th>
                    <th class="text-center" width="10%">修复数</th>
                  </tr>
                </thead>
                <tbody>
                  <template v-for="item in formData.fireRecord.testRecordsChart">
                    <template v-for="(obj, index) in item.sysItem">
                      <tr :key="item.sysName+'_'+index">
                        <td v-if="index == 0" class="text-left" :rowspan="item.sysItem.length">{{item.sysName}}</td>
                        <td class="text-left">{{obj.categoryName}}</td>
                        <td class="text-left">{{obj.testContent}}</td>
                        <td class="text-center">{{mapTestResult(obj.testResult)}}</td>
                        <td class="text-center">{{obj.testFault}}</td>
                        <td class="text-center">{{obj.testRepair}}</td>
                      </tr>
                    </template>
                  </template>
                  <tr>
                    <td class="text-center" colspan="2">巡查人（签名）</td>
                    <td class="text-center" colspan="4">
                      <div class="col-xs-7 no-padding">
                        <input type="text" readonly disabled class="form-control no-border font-bold no-padding-right">
                      </div>
                      <div class="col-xs-1">
                        <span class="form-control no-border font-bold no-padding-left">年</span>
                      </div>
                      <div class="col-xs-1 no-padding">
                        <input type="text" readonly disabled class="form-control no-border font-bold no-padding-right">
                      </div>
                      <div class="col-xs-1">
                        <span class="form-control no-border font-bold no-padding-left">月</span>
                      </div>
                      <div class="col-xs-1 no-padding">
                        <input type="text" readonly disabled class="form-control no-border font-bold no-padding-right">
                      </div>
                      <div class="col-xs-1">
                        <span class="form-control no-border font-bold no-padding-left">日</span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="text-center" colspan="2">消防安全管理人（签名）</td>
                    <td class="text-center" colspan="4">
                      <div class="col-xs-7 no-padding">
                        <input type="text" readonly disabled class="form-control no-border font-bold no-padding-right">
                      </div>
                      <div class="col-xs-1">
                        <span class="form-control no-border font-bold no-padding-left">年</span>
                      </div>
                      <div class="col-xs-1 no-padding">
                        <input type="text" readonly disabled class="form-control no-border font-bold no-padding-right">
                      </div>
                      <div class="col-xs-1">
                        <span class="form-control no-border font-bold no-padding-left">月</span>
                      </div>
                      <div class="col-xs-1 no-padding">
                        <input type="text" readonly disabled class="form-control no-border font-bold no-padding-right">
                      </div>
                      <div class="col-xs-1">
                        <span class="form-control no-border font-bold no-padding-left">日</span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="text-center" colspan="2">备注</td>
                    <td class="text-center" colspan="4">
                      <div class="col-xs-12" style="margin: 10px;">
                        <textarea readonly disabled class="no-border print-noborder editable"></textarea>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="form-group col-xs-12" style="padding-left: 7%;">
            <p class="text-left">注1：检查正常的划“√”，不正常的划“×”，未涉及的划“/”；</p>
            <p class="text-left">注2：对发现的问题应及时处理，当场不能处置的要填报《建筑消防设施故障处理记录》；</p>
            <p class="text-left">注3：本表由单位存档，存档时间不得少于1年。</p>
          </div>
        </form>
      </div>
    </div>
    <div class="page-break"></div>
    <template v-for="sysItem in formData.inspectRecord">
      <div class="page-content" :key="'pageContent_'+sysItem.systemName">
        <div class="row">
          <form class="form-horizontal">
            <div class="form-group col-xs-8">
              <label class="col-xs-1 control-label"></label>
              <label class="col-xs-11 control-label font-bold text-left cid"></label>
            </div>
            <div class="form-group col-xs-12">
              <div class="text-center">
                <h3 class="h3" style="letter-spacing: 2px;">{{sysItem.systemName.replace('系统', '')}}系统巡查记录单</h3>
              </div>
            </div>
            <div class="form-group col-xs-12">
              <div>
                <div class="pro-info">
                  <div class="col-xs-5 text-left no-padding font-bold">项目名称：{{proname}}</div>
                  <div class="col-xs-2 no-padding text-right font-bold">项目编号：</div>
                  <div class="col-xs-5 no-padding">
                    <input type="text" placeholder="请输入项目编号" class="form-control no-border no-padding font-bold" v-model="currentPronum">
                  </div>
                </div>
                <table id="maintainPlanTable" cellspacing="0" cellpadding="0" border="0">
                  <template v-for="(assetItem, index) in sysItem.record">
                    <tr :key="assetItem.assetType">
                      <th class="text-left" colspan="5">
                        <span class="col-xs-6">{{ (index+1) + '、' + assetItem.assetType }}</span>
                        <span class="col-xs-3 no-padding">设备总数：{{ assetItem.deviceNum }}</span>
                        <span class="col-xs-3 no-padding">已查数量：{{ assetItem.checkedNum }}</span>
                      </th>
                    </tr>
                    <template v-for="(num, i) in Math.ceil(assetItem.record.length/4)">
                      <tr :key="'area_'+index+'_'+i">
                        <!-- 资产类别_area_0 -->
                        <td class="text-center" width="20%">区域/编号</td>
                        <td width="20%">{{ assetItem.record[4*i] ? assetItem.record[4*i].area : '' }}</td>
                        <td width="20%">{{ assetItem.record[4*i+1] ? assetItem.record[4*i+1].area : '' }}</td>
                        <td width="20%">{{ assetItem.record[4*i+2] ? assetItem.record[4*i+2].area : '' }}</td>
                        <td width="20%">{{ assetItem.record[4*i+3] ? assetItem.record[4*i+3].area : '' }}</td>
                      </tr>
                      <tr :key="'deviceName_'+index+'_'+i">
                        <td class="text-center">设备名称</td>
                        <td>{{ assetItem.record[4*i] ? assetItem.record[4*i].deviceName : '' }}</td>
                        <td>{{ assetItem.record[4*i+1] ? assetItem.record[4*i+1].deviceName : '' }}</td>
                        <td>{{ assetItem.record[4*i+2] ? assetItem.record[4*i+2].deviceName : '' }}</td>
                        <td>{{ assetItem.record[4*i+3] ? assetItem.record[4*i+3].deviceName : '' }}</td>
                      </tr>
                      <tr :key="'singleMiantainedCount_'+index+'_'+i">
                        <td class="text-center">维保数量</td>
                        <td>{{ assetItem.record[4*i] ? (assetItem.record[4*i].singleMiantainedCount || '') : '' }}</td>
                        <td>{{ assetItem.record[4*i+1] ? (assetItem.record[4*i+1].singleMiantainedCount || '') : '' }}</td>
                        <td>{{ assetItem.record[4*i+2] ? (assetItem.record[4*i+2].singleMiantainedCount || '') : '' }}</td>
                        <td>{{ assetItem.record[4*i+3] ? (assetItem.record[4*i+3].singleMiantainedCount || '') : '' }}</td>
                      </tr>
                      <tr v-for="(workItem, j) in assetItem.workContentText" :key="assetItem.assetType+'_workContent_'+i+'_'+j">
                        <td class="text-center">{{ workItem }}</td>
                        <td>{{ assetItem.record[4*i] ? detlWithCompletion(assetItem.record[4*i].workContent[j]) : '' }}</td>
                        <td>{{ assetItem.record[4*i+1] ? detlWithCompletion(assetItem.record[4*i+1].workContent[j]) : '' }}</td>
                        <td>{{ assetItem.record[4*i+2] ? detlWithCompletion(assetItem.record[4*i+2].workContent[j]) : '' }}</td>
                        <td>{{ assetItem.record[4*i+3] ? detlWithCompletion(assetItem.record[4*i+3].workContent[j]) : '' }}</td>
                      </tr>
                    </template>
                  </template>
                  <template v-if="sysItem.record.length<=1">
                    <tr>
                      <td class="text-center" colspan="5">备注</td>
                    </tr>
                    <tr>
                      <td class="text-center" colspan="5">
                        <div class="col-xs-12" style="margin: 10px;">
                          <textarea readonly disabled class="no-border print-noborder editable" style="min-height:100px;"></textarea>
                        </div>
                      </td>
                    </tr>
                  </template>
                </table>
              </div>
            </div>
            <page-footer v-if="sysItem.record.length<=1"></page-footer>
          </form>
        </div>
      </div>
      <div class="page-break" :key="'pageBreak_'+sysItem.systemName"></div>
      <!-- 设备数量大于1个 -->
      <div v-if="sysItem.record.length>1" class="page-content" :key="'pageContent_'+sysItem.systemName+'2'">
        <div class="row">
          <form class="form-horizontal">
            <div class="form-group col-xs-12">
               <table id="maintainPlanTable" cellspacing="0" cellpadding="0" border="0">
                 <tr>
                    <td class="text-center">备注</td>
                  </tr>
                  <tr>
                    <td class="text-center">
                      <div class="col-xs-12" style="margin: 10px;">
                        <textarea readonly disabled class="no-border print-noborder editable" style="min-height:100px;"></textarea>
                      </div>
                    </td>
                  </tr>
               </table>
            </div>
            <page-footer></page-footer>
          </form>
        </div>
      </div>
      <div v-if="sysItem.record.length>1" class="page-break" :key="'pageBreak_'+sysItem.systemName+'2'"></div>
    </template>
    <!-- 作业图片 -->
    <work-imgs :workPic="formData.workPic" :status="status" :proname="proname" :pronum="currentPronum" :startTime="startTime" :endTime="endTime" ref="patrolWorkImgs"></work-imgs>
  </div>
</template>
<script>
import WorkImgs from './WorkImgs'
import PageFooter from './PageFooter'

export default {
  name: 'Attachment-4',
  props: {
    initData: {
      type: Object,
    },
    status: {},
    proname: {},
    pronum: {},
    startTime: {},
    endTime: {},
    directoryOrder: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  components: {
    WorkImgs,
    PageFooter
  },
  data() {
    return {
      currentPronum: this.pronum,
      formData: {
        fireRecord: {}, // 建筑消防设施巡查记录
        inspectRecord: [], // 系统巡查记录
        workPic: [], // 巡查作业图片
      },
    }
  },
  created() {
    let that = this
    if (that.initData) {
      that.formData.fireRecord = that.initData.fireRecord || {} // 建筑消防设施巡查记录
      that.formData.inspectRecord = that.initData.inspectRecord || [] // 系统巡查记录  [{"systemName":"系统名称","record":[{"assetType":"资产类别","deviceNum":"设备总数","checkedNum":"已查数量","workContentText":["作业子内容1","作业子内容2","作业子内容3"],"record":[{"area":"区域/编号1","deviceName":"设备名称","workContent":["内容1结果","内容2结果","内容3结果"]},{"area":"区域/编号2","deviceName":"设备名称","workContent":["内容1结果","内容2结果","内容3结果"]},{"area":"区域/编号3","deviceName":"设备名称","workContent":["内容1结果","内容2结果","内容3结果"]},{"area":"区域/编号4","deviceName":"设备名称","workContent":["内容1结果","内容2结果","内容3结果"]},{"area":"区域/编号5","deviceName":"设备名称","workContent":["内容1结果","内容2结果","内容3结果"]}]},{"assetType":"资产类别2","deviceNum":"设备总数","checkedNum":"已查数量","workContentText":["作业子内容1","作业子内容2","作业子内容3"],"record":[{"area":"区域/编号1","deviceName":"设备名称","workContent":["内容1结果","内容2结果","内容3结果"]},{"area":"区域/编号2","deviceName":"设备名称","workContent":["内容1结果","内容2结果","内容3结果"]},{"area":"区域/编号3","deviceName":"设备名称","workContent":["内容1结果","内容2结果","内容3结果"]},{"area":"区域/编号4","deviceName":"设备名称","workContent":["内容1结果","内容2结果","内容3结果"]},{"area":"区域/编号5","deviceName":"设备名称","workContent":["内容1结果","内容2结果","内容3结果"]}]}]},{"systemName":"系统名称2","record":[{"assetType":"资产类别","deviceNum":"设备总数","checkedNum":"已查数量","workContentText":["作业子内容1","作业子内容2","作业子内容3"],"record":[{"area":"区域/编号1","deviceName":"设备名称","workContent":["内容1结果","内容2结果","内容3结果"]},{"area":"区域/编号2","deviceName":"设备名称","workContent":["内容1结果","内容2结果","内容3结果"]},{"area":"区域/编号3","deviceName":"设备名称","workContent":["内容1结果","内容2结果","内容3结果"]},{"area":"区域/编号4","deviceName":"设备名称","workContent":["内容1结果","内容2结果","内容3结果"]},{"area":"区域/编号5","deviceName":"设备名称","workContent":["内容1结果","内容2结果","内容3结果"]}]}]}]
      that.formData.workPic = that.initData.workPic || [] // 巡查作业图片
    }
  },
  methods: {
    // 映射巡检结果
    mapTestResult(code) {
      const TestResultMAP = {
        0: '√',
        1: 'X',
        2: '/',
      }

      return TestResultMAP[code]
    },
    // 单点型资产维保结果映射
    maintainStandardResultMap(code) {
      const ResultMAP = {
        0: '√',
        1: 'X',
        2: '/',
      }

      return ResultMAP[code] || ''
    },
    // 处理完成情况
    detlWithCompletion(json) {
      let that = this
      let maintainStandardResultMap = that.maintainStandardResultMap
      let obj = json || {}

      if (obj !== {}) {
        let type = obj.type

        if (type == 1) {
          return maintainStandardResultMap(obj.tab)
        } else if (type == 2) {
          return obj.des
        } else if (type == 3) {
          return obj.num
        } else if (type == 4) {
          return maintainStandardResultMap(obj.tab) + (obj.des ? `；${obj.des}` : '')
        } else if (type == 5) {
          return maintainStandardResultMap(obj.tab) + (obj.num ? `；${obj.num}` : '')
        } else if (type == 6) {
          return (obj.des || '') + (obj.num ? `；${obj.num}` : '')
        }
      } else {
        return ''
      }
    },
    // 获取数据
    getData() {
      let that = this

      that.formData.workPic = that.$refs.patrolWorkImgs.getPicData()
      return that.formData
    },
  },
  watch: {
    pronum(val, oldVal) {
      if (val != oldVal) {
        this.currentPronum = val
      }
    },
    currentPronum(val, oldVal) {
      if (val != oldVal) {
        this.$emit('changePronum', val)
      }
    },
  },
}
</script>